<template>
    <div class="billingMethods" v-loading="isLoading">
        <cardComponent pageTitle="功能设置类-->寄送方式修改">
            <template slot="cardBody">
                <!-- 账单寄送方式查询 -->
                <div class="billingMethodsMain">
                    <el-form v-model="formData" label-width="40%" size="small">
                        <el-row>
                            <el-form-item label="账户类别:" label-position="left" prop="mainCardNo">
                                <el-input disabled v-model="accountType" style="width: 200px;"></el-input>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item label="卡号:" label-position="left" prop="mainCardNo">
                                <el-input disabled v-model="cardNo" style="width: 200px;"></el-input>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item label="账单寄送方式:" label-position="left" prop="mainCardNo">
                                <span
                                    class="mainRight personCard"
                                >{{formData.ADD1 + formData.ADD2 + formData.ADD3 + formData.ADD4 + formData.ADD5}}</span>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item label="Email地址:" label-position="left" prop="mainCardNo">
                                <span class="mainRight personCard">{{billmethods}}</span>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item label="当前账单寄送方式:" label-position="left" prop="mainCardNo">
                                <span class="mainRight personCard">{{ formData.STMCODE }}</span>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item label="新的账单寄送方式:" label-position="left" prop="mainCardNo">
                                <el-select></el-select>
                            </el-form-item>
                        </el-row>
                    </el-form>
                </div>
            </template>
        </cardComponent>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import { getAccountTypeName } from '@/utils/Common';
import cardComponent from '@/components/cardComponent/cardComponent.vue';
import { BILLINGMETHOD } from '@/utils/Contants';

export default {
    name: 'BillingResendDeliveryModify',
    components: {
        cardComponent,
    },
    data() {
        return {
            formData: {},
            // 原账单地址
            billmethods: '',
            dialogVisible: false,
            isLoading: false,
            accountType: '', // 账户类别
            cardNo: this.cardInfo_3004.CARDNO, // 卡号
        };
    },
    filters: {
        getMethodTxt(val) {
            if (val === undefined) {
                return '无任何账单寄送方式';
            }
            const txt = val.trim();
            let text = '';
            BILLINGMETHOD.forEach((item) => {
                if (item.value === txt) {
                    text = item.label;
                }
            });
            return text;
        },
    },
    async mounted() {
        // 获取账单信息
        this.getBillInfo();
        // 获取原账单寄送方式
        this.getBillMethod();
        this.accountType = await getAccountTypeName(this.cardList_3601, this.cardInfo_3004, this);
    },
    computed: mapState({
        cardInfo_3004: state => state.common.cardInfo_3004,
        cardList_3601: state => state.common.cardList_3601,
        defaultParams: state => state.common.defaultParams,
        defaultpinFlag: state => state.common.pinFlag,
    }),
    methods: {
        dialogTable(visible) {
            this.dialogVisible = visible;
        },
        // 获取账单信息
        getBillInfo() {
            const appBody = {
                CARDNBR: this.cardInfo_3004.CARDNO || '', // 卡号
                OPT: '1', // 查询方式 1-卡号查询  2-证件号查询
                PINFLAG: '0', // 是否检查密码标志
                PIN: '123456', // 密码
            };
            const defaultParams = JSON.parse(JSON.stringify(this.defaultParams));
            defaultParams.body.appHead.tranCode = '3014';
            defaultParams.body.appBody = appBody;
            // 3014交易
            this.$post.common.transPort(defaultParams).then((res) => {
                if (res.status === 200) {
                    const result = JSON.parse(res.data.jsonRes);
                    console.log(result.body.appBody, 222);
                    if (result.sysHead.rspCd === '000000') {
                        this.formData = result.body.appBody || [];
                    } else {
                        const errorMsg = `错误代码：${result.sysHead.rspCd}, 错误信息：${result.sysHead.rspMsg}`;
                        this.$alert(errorMsg, '提示', {
                            customClass: 'error', type: 'error',
                        });
                    }
                } else {
                    this.$alert('请求失败！', '提示', {
                        customClass: 'error', type: 'error',
                    });
                }
            });
        },
        getBillMethod() {
            const appBody = {
                CARDNBR: this.cardInfo_3004.CARDNO || '', // 卡号
                OPTION: 1, // 1:查询 2：修改 3：按位图修改 4：新增（仅北京银行）按手机号码方式查询时，只能查询不能修改，也不能按位图修改
                INQOPT: 1, // 查询方式 // 1-按卡号查询 2-按张建查询 3-按手机号码查询             //业务报文
                PINFLAG: '0', // 是否检查密码标志
            };
            const defaultParams = JSON.parse(JSON.stringify(this.defaultParams));
            defaultParams.body.appHead.tranCode = '3002';
            defaultParams.body.appBody = appBody;
            // 3002交易
            this.$post.common.transPort(defaultParams).then((res) => {
                if (res.status === 200) {
                    const result = JSON.parse(res.data.jsonRes);
                    if (result.sysHead.rspCd === '000000') {
                        this.billmethods = result.body.appBody.EMAIL || [];
                    } else {
                        const errorMsg = `错误代码：${result.sysHead.rspCd}, 错误信息：${result.sysHead.rspMsg}`;
                        this.$alert(errorMsg, '提示', {
                            customClass: 'error', type: 'error',
                        });
                    }
                } else {
                    this.$alert('请求失败！', '提示', {
                        customClass: 'error', type: 'error',
                    });
                }
            });
        },
    },
};
</script>

<style lang='scss'>
.BillingResendDeliveryModify {
    width: 98%;
    height: 100%;
    background: #fff;
    // padding:10px;
    box-sizing: border-box;
    border-radius: 5px;
    /* //头部内容 */
    .tab-header {
        width: 100%;
        text-align: left;
        span {
            font-size: 14px;
        }

        .headerTitle {
            font-size: 16px;
            margin: 10px 0px;
            color: skyblue;
        }
    }
    //主体内容
    .billingMethodsMain {
        width: 100%;
        .el-row {
            margin: 20px 0;
            .el-form-item__content {
                margin-left: 10px;
                text-align: left;
            }
        }
        .el-form-item__label {
            color: #999;
        }
        .mainRight {
            color: #111;
        }
    }
    .dialogVisible {
        margin-top: 20px;
    }
}
</style>
